<template>
  <el-dialog
    center
    :title="type == 'add' ? '添加' : '编辑'"
    v-model="Visible"
    width="30%"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="模块名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="模块编码" prop="name">
        <el-input v-model="ruleForm.code"></el-input>
      </el-form-item>
      <el-form-item label="视图路径" prop="viewPath">
        <el-input v-model="ruleForm.viewPath"></el-input>
      </el-form-item>
      <el-form-item label="视图类型" prop="viewType">
        <el-select
          v-model="ruleForm.viewType"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in viewTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input
          v-model="ruleForm.sort"
          onkeyup="value=value.replace(/[^\d]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          v-preventReClick
          @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, onMounted, nextTick } from "vue";
import { editModule, addModule } from "@/api/module";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
export default {
  name: "UpdatePassword",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
    dialogRow: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: "add",
    },
  },
  setup(props, context) {
    const dialogForm = ref(null);
    const store = useStore();

    const state = reactive({
      parentName: "",
      ruleForm: {
        parentId: null,
        name: "",
        code: "",
        viewPath: "",
        viewType: null,
        icon: "",
        sort: 100,
      },
      rules: {
        name: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入模块编码", trigger: "blur" }],
        viewPath: [
          { required: true, message: "请输入视图路径", trigger: "blur" },
        ],
        viewType: [
          { required: true, message: "请选择视图类型", trigger: "change" },
        ],
      },
      viewTypeOptions: [
        {
          label: "子系统",
          value: 1,
        },
        {
          label: "分组",
          value: 2,
        },
        {
          label: "模块",
          value: 3,
        },
      ],
    });

    onMounted(() => {
      const { type, dialogRow } = props;
      if (type == "add") {
        nextTick(() => {
          dialogForm.value.resetFields();
          state.ruleForm.parentId = dialogRow.parentId;
        });
      } else {
        state.ruleForm = props.dialogRow;
      }
    });
    const submitForm = () => {
      dialogForm.value.validate((valid) => {
        if (valid) {
          const { type, dialogRow } = props;
          if (type == "add") {
            addModule(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                handleClose();
                context.emit("refresh");
              }
            });
          } else {
            delete state.ruleForm.serialVersionUID;
            if (state.ruleForm.children) {
              delete state.ruleForm.children;
            }
            editModule(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                handleClose();
                context.emit("refresh");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const handleClose = () => {
      context.emit("close", false);
    };

    return {
      ...toRefs(state),
      submitForm,
      dialogForm,
      handleClose,
    };
  },
};
</script>
